<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Vite App</title>
    <style>
      *{
          padding:0;
          margin:0;
          list-style:none;
      }
      .dawaiceng{
          width:100vw;
          height:100vh;
          display:flex;
          justify-content:center;
          align-items:center;
      }
      .waiceng{
          width:300px;
          height:300px;
          font-size: 10px;
          display:flex;
          justify-content:center;
          align-items:center;
      }
      .waiceng span{
          position:absolute;
          --width: calc( 80px + ( var(--n) - 1 ) * 30px);
          width:var(--width);
          height:var(--width);
          border-style: solid;
          border-color: lime transparent;
          border-width:3px 3px 0 0;
          border-radius: 50%;
          animation: xuanzhuan linear infinite;
          animation-duration: calc( 10s / ( 11 - var(--n) + 1));
      }
      @keyframes xuanzhuan{
        to{
            transform: rotate(1turn);
        }
      }
      .waiceng span:nth-child(1){
          --n:1;
      }
      .waiceng span:nth-child(2){
          --n:2;
      }
      .waiceng span:nth-child(3){
          --n:3;
      }
      .waiceng span:nth-child(4){
          --n:4;
      }
      .waiceng span:nth-child(5){
          --n:5;
      }
      .waiceng span:nth-child(6){
          --n:6;
      }
      .waiceng span:nth-child(7){
          --n:7;
      }
      .waiceng span:nth-child(8){
          --n:8;
      }
      .waiceng span:nth-child(9){
          --n:9;
      }
      .waiceng span:nth-child(10){
          --n:10;
      }
    </style>
</head>
<body>
<div id="appProvider" style="display: none"></div>
<div id="app">

    <div class='dawaiceng'>
      <div class='waiceng'>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
